<template>
  <el-card
    v-bind="$attrs"
    class="box-card"
    shadow="never"
    :style="{ width, height }"
  >
    <template #header>
      <div class="clearfix">
        <span class="titleText">{{ title }}</span>
        <el-button
          v-show="showEdit" 
          style="float: right; 
          padding: 3px 5px; 
          fontSize: 16px;
          fontWeight: 700;
          color: #000"
          text
          @click="onEdit"
        >
          编辑
        </el-button>
        <el-link 
          v-show="showDetails" 
          class="detailsText" 
          type="info"
          :underline="false"
          style="float: right;"
          @click="viewDetails"
        >
          查看更多 
          <i class="el-icon-arrow-right"></i>
        </el-link>
        <div style="float: right">  
          <el-tooltip
            class="item"
            effect="dark"
            :content="showPieTable ? '表格显示' : '图形显示'"
            placement="top"
          >
            <i 
              v-show="showTable" 
              :class="showPieTable ? 'el-icon-s-grid' : 'el-icon-pie-chart'" 
              style="cursor: pointer"
              @click="showTableList"
            ></i>
          </el-tooltip>
        <!-- <el-tooltip class="item" effect="dark" content="全屏显示" placement="top">
          <i 
            class="el-icon-zoom-in" 
            v-show="showLoupe" 
            style="margin-left: 10px; cursor: pointer"
            @click="showFullScreen"
          ></i>
        </el-tooltip> -->
        </div>
      </div>
    </template>
    <!-- <viewsDialog ref="showFullScreen">
      <slot></slot>
    </viewsDialog> -->
    <slot></slot>
  </el-card>
</template>

<script setup lang="ts">
// import viewsDialog from "./dialog";
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
  title: {
    type: String,
    default: '',
  },
  showDetails: {
    type: Boolean,
    default: false,
  },
  showLoupe: {
    type: Boolean,
    default: false,
  },
  showTable: {
    type: Boolean,
    default: false,
  },
  showEdit: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['showTableList', 'showEditApp', 'viewDetails'])

const showPieTable = ref(false)
const dialogVisible = ref(true)

// const showFullScreen = () => {
//       $refs.showFullScreen.fullscreen = this.dialogVisible
//       this.$refs.showFullScreen.dialogVisible = this.dialogVisible
//     }
const showTableList = () => {
  showPieTable.value = !showPieTable.value
  emits('showTableList', showPieTable)
}
const onEdit = () => {
  emits('showEditApp', true)
}
const viewDetails = () => {
  emits('viewDetails')
}
</script>

<style lang="less" scoped>
  .box-card {
    margin-top: 10px;
    border-radius: 10px;
    /deep/.el-card__header {
        padding: 14px 15px 7px;
        min-height: 40px;
    }
    .titleText {
      float: left; 
      font-size: 16px; 
      color: #000;
      font-weight: 700;
    }
    .detailsText {
      font-size: 16px;
      font-weight: 700;
    }
    .detailsText:hover {
      color: #0a89ed;
    }
    ::v-deep .el-card__header {
      border-bottom: none;
    }
    // .clearfix:before,
    // .clearfix:after {
    //   display: table;
    //   content: "";
    // }
    // .clearfix:after {
    //   clear: both
    // }
  }
</style>